<template>
    <div id="owllike">
      <div id="scroll">
        <div class="favitem">
          <img src="../../assets/tenserflow.jpg">
          <p>TenserFlow</p>
        </div>
        <div class="favitem">
          <img src="../../assets/keras.png">
          <p>Keras</p>
        </div>
        <div class="favitem">
          <img src="../../assets/firebase.png">
          <p>Firebase</p>
        </div>
        <div class="favitem">
          <img src="../../assets/angular.png">
          <p>Angular</p>
        </div>
        <div class="favitem">
          <img src="../../assets/meteor.png">
          <p>Meteor</p>
        </div>
        <div class="favitem">
          <img src="../../assets/Rx-java.png">
          <p>Rx-java</p>
        </div>
        <div class="favitem">
          <img src="../../assets/node.png">
          <p>Node.js</p>
        </div>
        <div class="favitem">
          <img src="../../assets/unity3d.jpg">
          <p>Unity3D</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "owlLike"
    }
</script>

<style scoped>

  #owllike{


    width: 100%;
    height: 100px;
    /*background-color: black;*/
    overflow: scroll;
  }

  #scroll{

    width: 240%;
    height: 100%;
    /*background-color: yellow;*/
  }

  #scroll .favitem{

    width: 80px;
    height: 80px;
    /*background-color: aquamarine;*/
    float: left;
    margin-top: 5px;
    margin-left: 12px;
  }

  #scroll .favitem img:active{


    opacity: 0.7;
  }
  .favitem img{

    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
  }

  .favitem p{

    color: white;
    font-size: 12px;
  }

</style>
